<template>
  <view class="page-header-box">
    <view
      class="page-header"
      :style="[{ height: 'calc(' + statusBarHeight + 'px + 88rpx)' }]"
    >
      <view class="header-content" :style="[menuButtonStyle]">

        <!-- #ifndef MP-ALIPAY -->
          <!-- #ifndef MP-TOUTIAO -->
          <view class="back-icon" @click="pageGoback">
            <i class="iconfont icon-fanhui"></i>
          </view>

          <text v-if="pageTitle">{{ pageTitle }}</text>
          <!-- #endif -->
        <!-- #endif -->

        <slot></slot>
      </view>
    </view>
    <view
      class="hold-place"
      :style="[{ height: 'calc(' + statusBarHeight + 'px + 88rpx)' }]"
    ></view>
  </view>
</template>

<script>
import { diySysPageMixin } from "../../mixins/index";

export default {
  props: {
    pageTitle: {
      type: String,
      default: "",
    },
  },
  options: { styleIsolation: 'shared' },
  mixins: [diySysPageMixin], //混入文件
  watch: {},
  data() {
    return {};
  },
  computed: {
    menuButtonStyle() {
     let obj ={}
      // #ifdef APP-PLUS || H5
       obj = {
        top: this.statusBarHeight + "px",
        height: "88rpx",
        lineHeight: "88rpx",
      };
      // #endif
      
       // #ifdef MP-TOUTIAO
       obj = {
        top: 0 + "px",
        height: "88rpx",
        lineHeight: "88rpx",
      };
      // #endif
     
      // #ifndef APP-PLUS || H5 || MP-TOUTIAO
       obj = {
        top: this.menuButtonInfo.top + "px",
        height: this.menuButtonInfo.height + "px",
      };
      // #endif
      return obj;
    },
    hasPages() {
      let pages = [];
      pages = getCurrentPages();
      return pages.length > 1;
    },
  },
  methods: {
    pageGoback() {
      this.$utils.goBack();
    },
  },
  filters: {},
  mounted() {},
  onReady() {},
};
</script>

<style scoped lang="scss">
.page-header {
  width: 100%;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 511;
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
  .header-content {
    width: 92%;
    font-size: 36rpx;
    font-weight: 600;
    color: rgba(29, 29, 29, 0.94);
    text-align: center;
    position: absolute;
    left: 4%;
    top: 0;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;
    .back-icon {
      width: 50rpx;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 211;
      display: flex;
      align-items: center;
      .iconfont {
        color: #1d1d1d;
      }
    }
  }
}
.hold-place {
  width: 100%;
}
</style>
